<script setup>
import {reactive} from "vue";
import instance from "@/api/request.js";

const props = defineProps(["data"])
const emits = defineEmits(["submit", "cancel"])
const user = reactive({
    username: '',
    nickname: '',
    gender: 2,
    email: null,
    phone: null,
    roles: [],
    status: null,
    createTime: null
});
const loading = ref(false);
onMounted(() => {
    loading.value = true;
    instance.post(`/system/user/${props.data.username}`).then(res => {
        Object.assign(user, res.data)
    }).finally(() => {
        loading.value = false;
    })
})
</script>

<template>
    <div class="border-l border-gray-200 bg-gray-50 overflow-y-auto">
        <el-descriptions v-loading="loading" :column="2" border label-width="120px" size="large">
            <el-descriptions-item label="用户名">
                {{ user.username }}
            </el-descriptions-item>
            <el-descriptions-item label="昵称">
                {{ user.nickname }}
            </el-descriptions-item>
            <el-descriptions-item label="性别">
                <el-tag :type="user.gender === 1 ? 'danger' : (user.gender === 2 ? 'warning' : 'primary')" style="margin-right: 6px">{{ user.gender === 1 ? '\u2640' : (user.gender === 2 ? '\u2603' : '\u2642') }}</el-tag>
                {{ user.gender === 1 ? '女' : (user.gender === 2 ? '保密' : '男') }}
            </el-descriptions-item>
            <el-descriptions-item label="邮箱">
                {{ user.email || "未设置" }}
            </el-descriptions-item>
            <el-descriptions-item label="手机号">
                {{ user.phone || "未绑定" }}
            </el-descriptions-item>
            <el-descriptions-item label="角色">
                <el-tag
                    v-for="r in user.roles"
                    v-if="user.roles!=null"
                    :key="r.id"
                    style="margin: 0 4px"
                    size="small"
                >
                    {{ r.roleName }}
                </el-tag>
                <el-tag v-else class="mr-1"
                        size="small">
                    无角色分配
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="状态">
                <el-tag :type="user.status ? 'success' : 'info'">
                    {{ user.status ? "启用" : "禁用" }}
                </el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
                {{ user.createTime }}
            </el-descriptions-item>
        </el-descriptions>
    </div>
</template>

<style scoped>

</style>